React useEvent: வலுவான பயன்பாடுகளுக்கு ஈவென்ட் ஹேண்ட்லர்களை நிலைப்படுத்துதல்

நடைமுறையில் `useEvent`-ஐப் பயன்படுத்துதல்

முந்தைய உதாரணங்களை மீண்டும் பார்த்து, சிக்கல்களைத் தீர்க்க `useEvent`-ஐப் பயன்படுத்துவோம்.

பழைய குளோசர்களைச் சரிசெய்தல்

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

இப்போது, `handleClick` ஒரு நிலையான செயல்பாடாக உள்ளது, ஆனால் அது அழைக்கப்படும்போது, அது ரெஃப் மூலம் `count`-இன் மிகச் சமீபத்திய மதிப்பை அணுகுகிறது. இது பழைய குளோசர் சிக்கலைத் தடுக்கிறது.

தேவையற்ற மறு-ரெண்டர்களைத் தடுத்தல்

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

`handleClick` இப்போது ஒரு நிலையான செயல்பாட்டு குறிப்பாக இருப்பதால், `ChildComponent` அதன் ப்ராப்ஸ் *உண்மையில்* மாறும்போது மட்டுமே மறு-ரெண்டர் ஆகும், இது செயல்திறனை மேம்படுத்துகிறது.

மாற்று செயலாக்கங்கள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

`useLayoutEffect` உடன் `useEvent`

சில சந்தர்ப்பங்களில், `useEvent` செயலாக்கத்திற்குள் `useEffect`-க்கு பதிலாக `useLayoutEffect`-ஐப் பயன்படுத்த வேண்டியிருக்கலாம். `useLayoutEffect` அனைத்து DOM மாற்றங்களுக்கும் பிறகு ஒத்திசைவாக செயல்படுகிறது, ஆனால் உலாவி வரைவதற்கு வாய்ப்பு கிடைப்பதற்கு முன்பு. ஈவென்ட் ஹேண்ட்லர், ஈவென்ட் தூண்டப்பட்ட உடனேயே DOM-ஐப் படிக்க அல்லது மாற்ற வேண்டியிருந்தால் இது முக்கியமானது. இந்தச் சரிசெய்தல் உங்கள் ஈவென்ட் ஹேண்ட்லருக்குள் மிகச் சமீபத்திய DOM நிலையைப் பிடிப்பதை உறுதிசெய்கிறது, உங்கள் கூறு காண்பிப்பதற்கும் அது பயன்படுத்தும் தரவிற்கும் இடையே ஏற்படக்கூடிய முரண்பாடுகளைத் தடுக்கிறது. `useEffect` மற்றும் `useLayoutEffect` ஆகியவற்றுக்கு இடையே தேர்ந்தெடுப்பது உங்கள் ஈவென்ட் ஹேண்ட்லரின் குறிப்பிட்ட தேவைகள் மற்றும் DOM புதுப்பிப்புகளின் நேரத்தைப் பொறுத்தது.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

எச்சரிக்கைகள் மற்றும் சாத்தியமான சிக்கல்கள்

• சிக்கலானது: `useEvent` குறிப்பிட்ட சிக்கல்களைத் தீர்க்கும் அதே வேளையில், இது உங்கள் குறியீட்டிற்கு ஒரு சிக்கலான அடுக்கைச் சேர்க்கிறது. அதை திறம்பட பயன்படுத்த அடிப்படைக் கருத்துக்களைப் புரிந்துகொள்வது முக்கியம்.
• அதிகப்படியான பயன்பாடு: `useEvent`-ஐ கண்மூடித்தனமாகப் பயன்படுத்த வேண்டாம். ஈவென்ட் ஹேண்ட்லர்கள் தொடர்பான பழைய குளோசர்கள் அல்லது தேவையற்ற மறு-ரெண்டர்களை நீங்கள் சந்திக்கும் போது மட்டுமே அதைப் பயன்படுத்துங்கள்.
• சோதனை: `useEvent`-ஐப் பயன்படுத்தும் கூறுகளைச் சோதிக்கும்போது, சரியான ஹேண்ட்லர் தர்க்கம் செயல்படுத்தப்படுகிறதா என்பதை உறுதிப்படுத்த கவனமாக இருக்க வேண்டும். உங்கள் சோதனைகளில் நீங்கள் `useEvent` ஹூக்கை மாலிடம் செய்யவோ அல்லது `handlerRef`-ஐ நேரடியாக அணுகவோ வேண்டியிருக்கலாம்.

ஈவென்ட் கையாளுதலில் உலகளாவிய கண்ணோட்டங்கள்

உலகளாவிய பார்வையாளர்களுக்காக பயன்பாடுகளை உருவாக்கும்போது, ஈவென்ட் கையாளுதலில் கலாச்சார வேறுபாடுகள் மற்றும் அணுகல் தேவைகளைக் கருத்தில் கொள்வது அவசியம்:

• விசைப்பலகை வழிசெலுத்தல்: அனைத்து ஊடாடும் கூறுகளும் விசைப்பலகை வழிசெலுத்தல் மூலம் அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும். வெவ்வேறு பிராந்தியங்களில் உள்ள பயனர்கள் ஊனம் அல்லது தனிப்பட்ட விருப்பங்கள் காரணமாக விசைப்பலகை வழிசெலுத்தலை நம்பியிருக்கலாம்.
• தொடு ஈவென்ட்கள்: மொபைல் சாதனங்களில் உள்ள பயனர்களுக்காக தொடு ஈவென்ட்களை ஆதரிக்கவும். டெஸ்க்டாப் அணுகலை விட மொபைல் இணைய அணுகல் அதிகமாக உள்ள பகுதிகளைக் கருத்தில் கொள்ளுங்கள்.
• உள்ளீட்டு முறைகள்: சீனம், ஜப்பானியம் மற்றும் கொரிய உள்ளீட்டு முறைகள் போன்ற உலகம் முழுவதும் பயன்படுத்தப்படும் வெவ்வேறு உள்ளீட்டு முறைகளைக் கவனத்தில் கொள்ளுங்கள். ஈவென்ட்கள் சரியாக கையாளப்படுகின்றனவா என்பதை உறுதிப்படுத்த உங்கள் பயன்பாட்டை இந்த உள்ளீட்டு முறைகளுடன் சோதிக்கவும்.
• அணுகல்தன்மை: உங்கள் ஈவென்ட் ஹேண்ட்லர்கள் ஸ்கிரீன் ரீடர்கள் மற்றும் பிற உதவித் தொழில்நுட்பங்களுடன் இணக்கமாக இருப்பதை உறுதிசெய்து, எப்போதும் அணுகல்தன்மை சிறந்த நடைமுறைகளைப் பின்பற்றவும். இது பல்வேறு கலாச்சாரப் பின்னணிகளில் உள்ளடக்க பயனர் அனுபவங்களுக்கு மிகவும் முக்கியமானது.
• நேர மண்டலங்கள் மற்றும் தேதி/நேர வடிவங்கள்: தேதிகள் மற்றும் நேரங்களை உள்ளடக்கிய ஈவென்ட்களைக் கையாளும்போது (எ.கா., திட்டமிடல் கருவிகள், சந்திப்பு காலெண்டர்கள்), வெவ்வேறு பிராந்தியங்களில் பயன்படுத்தப்படும் நேர மண்டலங்கள் மற்றும் தேதி/நேர வடிவங்களைக் கவனத்தில் கொள்ளுங்கள். பயனர்கள் தங்கள் இருப்பிடத்தின் அடிப்படையில் இந்த அமைப்புகளைத் தனிப்பயனாக்க விருப்பங்களை வழங்கவும்.

`useEvent`-க்கு மாற்றுகள்

`useEvent` ஒரு சக்திவாய்ந்த நுட்பமாக இருந்தாலும், ரியாக்டில் ஈவென்ட் ஹேண்ட்லர்களை நிர்வகிக்க மாற்று அணுகுமுறைகள் உள்ளன:

• ஸ்டேட்டை உயர்த்துதல்: சில நேரங்களில், ஈவென்ட் ஹேண்ட்லர் சார்ந்திருக்கும் ஸ்டேட்டை ஒரு உயர்-நிலை கூறுக்கு உயர்த்துவதே சிறந்த தீர்வாகும். இது ஈவென்ட் ஹேண்ட்லரை எளிதாக்கி, `useEvent`-இன் தேவையை நீக்கும்.
• `useReducer`:** உங்கள் கூறுகளின் ஸ்டேட் தர்க்கம் சிக்கலானதாக இருந்தால், `useReducer` ஸ்டேட் புதுப்பிப்புகளை மேலும் கணிக்கக்கூடிய வகையில் நிர்வகிக்கவும், பழைய குளோசர்களின் வாய்ப்பைக் குறைக்கவும் உதவும்.
• கிளாஸ் கூறுகள்: நவீன ரியாக்டில் குறைவாகப் பொதுவானதாக இருந்தாலும், கிளாஸ் கூறுகள் ஈவென்ட் ஹேண்ட்லர்களை கூறு நிகழ்வுடன் பிணைக்க ஒரு இயற்கையான வழியை வழங்குகின்றன, இது குளோசர் சிக்கலைத் தவிர்க்கிறது.
• சார்புநிலைகளுடன் கூடிய இன்லைன் செயல்பாடுகள்: ஈவென்ட் ஹேண்ட்லர்களுக்கு புதிய மதிப்புகள் அனுப்பப்படுவதை உறுதிசெய்ய, சார்புநிலைகளுடன் கூடிய இன்லைன் செயல்பாட்டு அழைப்புகளைப் பயன்படுத்தவும். ஸ்டேட் மூலம் புதுப்பிக்கப்பட்ட `arg1` மற்றும் `arg2` உடன் `onClick={() => handleClick(arg1, arg2)}` ஒவ்வொரு ரெண்டரிலும் புதிய அநாமதேய செயல்பாட்டை உருவாக்கும், இதனால் புதுப்பிக்கப்பட்ட குளோசர் மதிப்புகளை உறுதி செய்கிறது, ஆனால் `useEvent` தீர்க்கும் தேவையற்ற மறு-ரெண்டர்களை ஏற்படுத்தும்.